<template>
  <view class="container">
    <view class="header">
      <view class="shop-name">
        <image src="/static/images/order/shop.png"/>
        <h4>书香阁官方直营店</h4>
        <u-icon name="arrow-right"/>
      </view>
      <view>
        <text v-if="items.status=='0'" style="color: #FF9E29">
          待付款
        </text>
        <text v-else-if="items.status=='1'" style="color: #FF9E29">
          订单已取消
        </text>
        <text v-else-if="items.status=='6'" style="color: #FF9E29">
          交易完成
        </text>
        <text v-else-if="items.status=='5'" style="color: #FF9E29">
          待评价
        </text>
        <text v-else style="color: #FF9E29">
          待收货
        </text>
      </view>
    </view>
    <view class="content" v-for="(item,index) in items.orderItems" :key="item.id">
      <up-image :show-loading="true" radius="25" :src="'http://'+item.defaultImg" width="200rpx"
                height="220rpx"></up-image>
      <view style="margin-top: 15rpx;flex: 1">
        <text class="u-line-2" style="margin-left: 15rpx">
          {{ item.goodsName }}
        </text>
        <view style="margin: 15rpx">
          <view style="display: flex">
            <u-tag text="七天无理由退换" mode="dark" size="mini" type="error" plain></u-tag>
            <u-tag text="全程保价" mode="dark" size="mini" type="error" plain style="margin-left: 15rpx"></u-tag>
          </view>
          <u-tag text="公益捐款0.02" mode="dark" size="mini" style="margin-top: 15rpx" type="error" plain></u-tag>
        </view>
      </view>
      <view style="display: flex;flex-direction: column;align-items: flex-end;margin-left: 5rpx">
        <text>￥{{ item.itemPrice }}</text>
        <text>×{{ item.count }}</text>
      </view>
    </view>


    <view class="bottom">
      <text style="font-size: 25rpx;color: #B0B0B0;margin-right: 15rpx">含全程报价服务</text>
      <text>实付款￥{{ items.orderPrice }}</text>
    </view>
    <view>
      <view v-if="items.status=='5'" style="width: 160rpx;padding: 15rpx;margin-left: 520rpx">
        <u-button class="btn" @click="toComment()" color="#FF9E29" shape="circle" :plain="true"
                  text="去评价"></u-button>
      </view>

      <view v-else-if="items.status=='0'" style="width: 160rpx;padding: 15rpx;margin-left: 520rpx">
        <u-button class="btn" @click="show = true" color="#FF9E29" shape="circle" :plain="true"
                  text="去支付"></u-button>
      </view>

      <view v-else class="bottom-btn">
        <view>
          <u-button class="custom-style" shape="circle" :plain="true" text="删除订单"></u-button>
        </view>
        <view>
          <u-button class="custom-style" shape="circle" style="width: 160rpx;margin: 0 30rpx" :plain="true"
                    text="加入购物车"></u-button>
        </view>
        <view>
          <u-button class="custom-style" color="#FF9E29" shape="circle" :plain="true" text="再来一单"></u-button>
        </view>
      </view>
    </view>

    <u-line></u-line>
    <u-action-sheet round="30" :show="show" @close="close()">
      <view style="padding: 20rpx;position: relative">
        <view style="margin: 40rpx 0;">
          <text style="font-size: 40rpx;font-weight: 600">支付订单</text>
          <text style="position: absolute;right: 40rpx;top: 40rpx;font-size: 50rpx;font-weight: 600" @click="close()">
            ×
          </text>
        </view>
        <text style="color: #B0B0B0">书香阁</text>
        <view class="play-price">
          ￥{{ items.orderPrice }}
        </view>
        <view style="height: 150rpx"></view>
        <view class="immediately-play-btn" @click="toPlay()">
          立即支付
        </view>
      </view>
    </u-action-sheet>
  </view>

</template>

<script setup lang="ts">

import {reqPayOrder} from "@/api/order";
import {ref} from "vue";

const props = defineProps(['index', 'item'])

const items = props.item

const src = "https://picsum.photos/200/300?index=" + props.index

const toComment = () => {
  uni.navigateTo({
    url: '/pages/order-comment/order-comment?id=' + items.orderItems[0].id
  })
}

const show = ref(false)

const close = () => {
  show.value = false
}

const toPlay = async () => {
  await reqPayOrder({orderId: items.orderId}).then((res: any) => {
    show.value = false
    if (res.code == 200) {
      uni.navigateTo({
        url: '/pages/user/order/orderSuccess/orderSuccess?orderNo=' + items.orderId
      })
    } else {
      uni.showToast({
        title: '支付失败，请再次重试',
        icon: 'none'
      })
    }
  })
}
</script>


<style scoped lang="scss">
.container {
  margin: 30rpx 30rpx;

  .immediately-play-btn {
    width: 90vw;
    margin: 20rpx;
    font-size: 30rpx;
    color: white;
    border-radius: 50rpx;
    line-height: 60rpx;
    bottom: 20rpx;
    background: #29AB65;
    padding: 15rpx 40rpx;
  }

  .play-price {
    width: 90vw;
    margin: 20rpx;
    font-size: 60rpx;
    font-weight: 600;
    color: black;

  }

  .bottom-item {
    display: flex;
    width: 90vw;
  }

  .header {
    margin: 30rpx 0;
    display: flex;
    justify-content: space-between;
    align-items: center;


    .shop-name {
      display: flex;
      align-items: center;

      image {
        width: 50rpx;
        height: 50rpx;
      }

      h4 {
        font-size: 30rpx;
        margin: 0 30rpx;
      }
    }

  }

  .content {
    display: flex;
    justify-content: space-between;
    margin-top: 25rpx;
  }

  .bottom {
    display: flex;
    align-items: center;
    justify-content: right;
  }

  .bottom-btn {
    height: 100rpx;
    display: flex;
    justify-content: right;
    margin: 30rpx 0;

    .custom-style {
      width: 150rpx;
      height: 70rpx;
    }

    .btn:nth-child(2) {
      width: 180rpx;
    }

  }

}
</style>
